<template>
  <div>
    <navs></navs>
    <div class="bannerbg">
      <div @mouseover="bannerOver" @mouseout="bannerOut" ref="banner">
        <ul class="banner" ref="bannerul">
          <li v-for="(item,index) in data.banner" :key="index" ref="bannerli">
            <div>
              <img :src="item.src" alt />
            </div>
            <div class="bannerText">
              <p>{{item.text1}}</p>
              <p>{{item.text2}}</p>
              <router-link to="/list">
                <button style="cursor: pointer">了解更多&gt;</button>
              </router-link>
            </div>
          </li>
        </ul>
        <span @click="bannerLast">&lt;</span>
        <span @click="bannerNext">&gt;</span>
      </div>
    </div>
    <div class="main">
      <div class="main_hot">
        <div>
          <p>热卖推荐</p>
          <router-link to="/list">立即选购&gt;</router-link>
        </div>
        <ul>
          <router-link to="/details" v-for="(item,index) in data.liangxie" :key="index">
            <li>
              <img :src="item.imgsrc" alt />
              <p>{{item.text}}</p>
            </li>
          </router-link>
        </ul>
      </div>
      <div class="main_hot2">
        <router-link to="/list">
          <div>
            <img src="../../public/images/home/modeng.jpg" alt />
            <div>
              <p>摩登之境</p>
              <p>AIBU ELEVATE SQUARED 塑雅方头系列，都市寻绿</p>
              <p>立即选购&gt;</p>
            </div>
          </div>
        </router-link>
        <router-link to="/list">
          <div>
            <img src="../../public/images/home/ziran.jpg" alt />
            <div>
              <p>城市自然</p>
              <p>AIBU 健步2.1越野系列，徒出轻趣</p>
              <p>立即选购&gt;</p>
            </div>
          </div>
        </router-link>
      </div>
      <div class="main_pige">
        <div class="main_pige_title">
          <p>优质皮革</p>
          <p>X</p>
          <p>创新舒适</p>
          <p>AIBU时尚搭配推荐</p>
        </div>
        <div class="main_pige_1">
          <router-link to="/details">
            <div>
              <img src="../../public/images/home/yunran.jpg" alt />
              <p>AIBU云冉系列</p>
            </div>
          </router-link>
          <router-link to="/details">
            <div>
              <img src="../../public/images/home/yazhi.jpg" alt />
              <p>AIBU雅致系列</p>
            </div>
          </router-link>
        </div>
        <div class="main_pige_2">
          <router-link to="/details">
            <div>
              <img src="../../public/images/home/nvshiliangxie.jpg" />
              <p>AIBU塑雅方头50系列女士凉鞋</p>
            </div>
          </router-link>
          <router-link to="/details">
            <div>
              <img src="../../public/images/home/fangtoupixie.jpg" />
              <p>AIBU赫尔辛基2系列男士正装鞋</p>
            </div>
          </router-link>
        </div>
        <div class="main_pige_3">
          <router-link to="/list">
            <div>
              <img src="../../public/images/home/gongyi.jpg" alt />
              <div class="main_pige_3_text">
                <p>匠心皮革工艺</p>
                <p>在AIBU，跨越七代的皮革鞣制技术以传承至今，AIBU家族皮革厂自产皮革，设计师和匠人们将优质的皮革制成高品质鞋履及包袋配件</p>
                <p>选购夏日凉鞋&gt;</p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
      <div class="main_toggle">
        <div v-for="(item,index) in data.toggle" :key="index" > 
        <transition>
            <router-link to="/list" v-show="data.toggleIndex===index">
              <div class="main_toggle_img">
                <img :src="item.imgsrc" alt />
              </div>
              <div class="main_toggle_text">
                <p>{{item.text1}}</p>
                <p>{{item.text2}}</p>
                <p>{{item.text3}}</p>
                <p>立即选购&gt;</p>
                <div>
                  <span @click.prevent="handleLast(index)">
                    <img src="../../public/images/home/left.png" alt />
                  </span>
                  <span @click.prevent="handleNext(index)">
                    <img src="../../public/images/home/right.png" alt />
                  </span>
                </div>
              </div>
              <div class="main_toggle_zhiwen">
                <img src="../../public/images/home/zhiwen.png" alt />
              </div>
            </router-link>
            </transition>
        </div>
      </div>
      <div class="main_new">
        <div>
          <p>新一代制鞋工艺</p>
          <p>自品牌创立以来，AIBU不断追求科技创新。创新FLUIDFORM直接注塑工艺，将液态PU直接注入鞋模，使鞋底与鞋面一体合成，带来更加轻盈舒适的脚感</p>
        </div>
        <ul>
          <router-link to="/details" v-for="(item,index) in data.new" :key="index">
            <li ref="toggle">
              <img :src="item.imgsrc" alt />
              <p>{{item.text}}</p>
            </li>
          </router-link>
        </ul>
      </div>
      <div class="main_chuanda">
        <p>AIBU穿搭</p>
        <p>沿袭北欧风格，尽显生活美学</p>
        <div>
          <div
            class="main_chuanda_left"
            @mouseover="data.isShow = true"
            @mouseout="data.isShow = false"
          >
            <img src="../../public/images/home/chuandaleft.jpg" alt />
            <div v-show="data.isShow">
              <router-link to="/details">立即选购</router-link>
            </div>
          </div>
          <div class="main_chuanda_right">
            <div
              v-for="(item,index) in data.chuanda"
              :key="index"
              @mouseover="handleShow(index)"
              @mouseout="data.showIndex = ''"
            >
              <img :src="item.src" alt />
              <div v-show="data.showIndex===index">
                <router-link to="/details">立即选购</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main_sheji">
        <div class="main_sheji_left">
          <P>丹麦设计</P>
          <P>AIBU爱步成立于1963年，作为北欧丹麦鞋履及皮具品牌，其成功源于符合人体工学的产品设计及优质皮革。“鞋必须遵循双足”的设计理念，AIBU爱步将舒适度与北欧风格融为一体。</P>
        </div>
        <div class="main_sheji_right">
          <div v-for="(item,index) in data.sheji" :key="index">
            <router-link to="/list">
              <img :src="item.src" alt />
              <div>
                <p>{{item.text}}</p>
                <p>了解更多&gt;</p>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="main_tuijian">
        <p>热门推荐</p>
        <p>BEST SELLERS</p>
        <ul>
          <li v-for="(item,index) in data.tuijian" :key="index">
            <router-link to="/details">
              <img :src="item.src" alt />
              <p>{{item.text}}</p>
              <p>
                <span>￥{{item.newPrice}}</span>
                <del>￥{{item.oldPrice}}</del>
              </p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <returnTop></returnTop>
    <footers></footers>
  </div>
</template>


<script setup>
// 引入组件
import returnTop from "../components/ReturnTop.vue";
import navs from "../components/Nav.vue";
import footers from "../components/Footer.vue";
//引入vue模块
import { ref, reactive } from "vue";
import { $get, $post } from "../../request/index";




//定义数据
const data = reactive({
  timer: "",
  index: 0,
  toggleIndex: 0,
  showIndex: "",
  isShow: false,
  banner: [
    {
      src: "../../public/images/home/banner1.jpg",
      text1: "解放双手 自在随型",
      text2: "AIBU Leather Goods皮具系列2022春夏新款上市"
    },
    {
      src: "../../public/images/home/banner2.jpg",
      text1: "无绿不夏天",
      text2: "AIBU夏日系列鞋款全新上市，一起见证夏日美好"
    },
    {
      src: "../../public/images/home/banner3.jpg",
      text1: "年中狂欢盛典",
      text2: "即日起至6月18日。精选商品限时特惠"
    },
    {
      src: "../../public/images/home/banner4.jpg",
      text1: "流光渐冉 幻彩如云",
      text2: "AIBU打造全新RISE云冉系列春夏包袋"
    },
    {
      src: "../../public/images/home/banner1.jpg",
      text1: "解放双手 自在随型",
      text2: "AIBU Leather Goods皮具系列2022春夏新款上市"
    }
  ],
  liangxie: [
    {
      imgsrc: "../../public/images/home/liangxie1.jpg",
      text: "AIBU科摩系列女士凉鞋"
    },
    {
      imgsrc: "../../public/images/home/liangxie2.jpg",
      text: "AIBU驱动系列男士凉鞋"
    },
    {
      imgsrc: "../../public/images/home/liangxie3.jpg",
      text: "AIBU驱动系列女士凉鞋"
    },
    {
      imgsrc: "../../public/images/home/liangxie4.jpg",
      text: "AIBU科摩系列男士凉鞋"
    }
  ],
  toggle: [
    {
      imgsrc: "../../public/images/home/toggle1.jpg",
      text1: "AIBU OFFROAD 越野系列",
      text2: "升级再造 绿色生活",
      text3:
        "皮质鞋面柔软兼具质感，轻盈透气的织物衬里贴合足型，让你在户外徒步穿行中也能享受舒适足感"
    },
    {
      imgsrc: "../../public/images/home/toggle2.jpg",
      text1: "AIBU MX 驱动系列",
      text2: "探索户外 舒适行走",
      text3:
        "Motion FSDX皮革具有出色的抗撕裂性和耐用性。鞋底采用FLUIDFORM直接注塑科技，则让行走更舒适"
    },
    {
      imgsrc: "../../public/images/home/toggle3.jpg",
      text1: "AIBU ANINE SQUARED 安妮方头系列",
      text2: "时尚方头 简约舒适",
      text3:
        "以别致方头裹藏典雅气息，皮质包跟与鞋床凸显现代简约感，体现当代都市女性的柔美气质之余，让温柔与洒脱收放自如"
    },
    {
      imgsrc: "../../public/images/home/toggle4.jpg",
      text1: "AIBU RETRO 复古跑鞋系列",
      text2: "复古风潮 回溯经典",
      text3:
        "鞋面由优质牛皮制成，多款细节打造精致外观，撞色缝线设计，创新FLUIDFORM直接注塑科技使得鞋底更加灵活"
    }
  ],
  new: [
    {
      imgsrc: "../../public/images/home/new1.jpg",
      text: "AIBU驱动系列男士凉鞋"
    },
    {
      imgsrc: "../../public/images/home/new2.jpg",
      text: "AIBU越野系列男士运动鞋"
    },
    {
      imgsrc: "../../public/images/home/new3.jpg",
      text: "AIBU安妮方头系列女士正装鞋"
    },
    {
      imgsrc: "../../public/images/home/new4.jpg",
      text: "AIBU复古跑鞋系列女士休闲鞋"
    }
  ],
  chuanda: [
    {
      src: "../../public/images/home/chuandaright1.jpg"
    },
    {
      src: "../../public/images/home/chuandaright2.jpg"
    },
    {
      src: "../../public/images/home/chuandaright3.jpg"
    },
    {
      src: "../../public/images/home/chuandaright4.jpg"
    }
  ],
  sheji: [
    {
      src: "../../public/images/home/sheji1.jpg",
      text: "多面精彩的「品味型动派」"
    },
    {
      src: "../../public/images/home/sheji2.jpg",
      text: "敢玩敢试的「创意型动派」"
    },
    {
      src: "../../public/images/home/sheji3.jpg",
      text: "平衡生活的「氧气型动派」"
    }
  ],
  tuijian: [
    {
      src: "../../public/images/home/nvzheng.jpg",
      text: "AIBU型塑20尖头系列女士正装鞋",
      newPrice: 1369,
      oldPrice: 1799
    },
    {
      src: "../../public/images/home/nvxiu.jpg",
      text: "AIBU悦动系列女士运动休闲鞋",
      newPrice: 1369,
      oldPrice: 1799
    },
    {
      src: "../../public/images/home/nanxiu.jpg",
      text: "AIBU悦动系列男士运动休闲鞋",
      newPrice: 1369,
      oldPrice: 1799
    },
    {
      src: "../../public/images/home/nanzheng.jpg",
      text: "AIBU舒适型走系列男士正装鞋",
      newPrice: 1369,
      oldPrice: 1799
    }
  ]
});
//自定义动画
function animate(obj, end, callback) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    let step = (end - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == end) {
      clearInterval(obj.timer);
      if (callback) {
        callback();
      }
    } else {
      obj.style.left = obj.offsetLeft + step + "px";
    }
  }, 20);
}
//轮播
const banner = ref(null);
const bannerul = ref(null);
const bannerli = ref(null);
const autoplay = () => {
  data.timer = setInterval(() => {
    bannerNext();
  }, 2000);
};
autoplay();
//上一张
const bannerLast = () => {
  if (data.index == 0) {
    data.index = bannerli.value.length - 1;
    bannerul.value.style.left = -data.index * banner.value.offsetWidth + "px";
  }
  data.index--;
  //图片滚动
  animate(bannerul.value, -data.index * banner.value.offsetWidth);
};
//下一张
const bannerNext = () => {
  if (data.index == bannerli.value.length - 1) {
    data.index = 0;
    bannerul.value.style.left = 0;
  }
  data.index++;
  //图片滚动
  animate(bannerul.value, -data.index * banner.value.offsetWidth);
};
//移入清除定时器
const bannerOver = () => {
  clearInterval(data.timer);
};
//移出开启定时器
const bannerOut = () => {
  autoplay();
};
//toggle切换
const toggle = ref()
//toggle下一张
const handleNext = index => {
  if (index == toggle.value.length-1) {
    index = -1;
  }
  data.toggleIndex = index + 1;
};
//toggle上一张
const handleLast = index => {
  if (index == 0) {
    index = toggle.value.length;
  }
  data.toggleIndex = index - 1;
};
//穿搭背景显示隐藏
const handleShow = index => {
  data.showIndex = index;
};
</script>

<style scoped>
/* 闪烁动画 */
.v-enter-active,.v-leave-active {
  transition: all 0.5s ease;
}
.v-enter-from,.v-leave-to {
  opacity: 0;
}

/* 轮播部分 */
.bannerbg > div {
  border-radius: 1rem;
  width: 94rem;
  height: 29rem;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 5rem;
  position: relative;
}
.banner {
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
}
.banner li {
  position: relative;
}
.bannerText {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.bannerText p {
  color: white;
}
.bannerText p:first-of-type {
  font-size: 4rem;
  margin-bottom: 1rem;
}
.bannerText p:last-of-type {
  font-size: 1.4rem;
  white-space: nowrap;
}
.bannerText button {
  background-color: white;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
}
.banner img {
  width: 94rem;
}
.bannerbg > div span:first-of-type {
  left: 0;
  border-radius: 0 1rem 1rem 0;
   padding-right:1rem;
}
.bannerbg > div span:last-of-type {
  right: 0;
  border-radius: 1rem 0 0 1rem;
  padding-left:1rem;
}
.bannerbg > div span {
  cursor: pointer;
  font-size: 2rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.6rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* 主体部分 */
.main {
  width: 76rem;
  margin: 6rem auto;
}
.main_hot {
  display: flex;
  justify-content: space-between;
}
.main_hot div {
  text-align: center;
}
.main_hot div p {
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
}
.main_hot > ul {
  display: flex;
}
.main_hot div a {
  background-color: black;
  color: white;
  padding: 0.5rem 2.6rem;
  font-size: 1.2rem;
}
.main_hot ul li {
  width: 12rem;
  height: 18rem;
  margin-left: 1rem;
}
.main_hot ul li:hover {
  box-shadow: 0 0 1rem rgb(169, 169, 169);
}
.main_hot ul li p {
  text-align: center;
  font-size: 1.4rem;
  margin: 0 1rem;
  color: black;
}
.main_hot ul li img {
  width: 100%;
}

.main_hot2 {
  display: flex;
  justify-content: space-between;
  margin-top: 6rem;
}
.main_hot2>a>div {
  width:37rem;
  position: relative;
}
.main_hot2>a>div img{
  width: 100%;
}
.main_hot2 > a > div:hover {
  box-shadow: 0 0 1rem grey;
}
.main_hot2 div div {
  position: absolute;
  bottom: 2.6rem;
  left: 2.6rem;
}
.main_hot2 div div p:first-of-type {
  font-size: 1.8rem;
  color: white;
  margin-bottom: 1rem;
}
.main_hot2 div div p:nth-of-type(2) {
  color: white;
  margin-bottom: 1rem;
}
.main_hot2 div div p:last-of-type {
  background-color: white;
  color: black;
  padding: 0.5rem 2.4rem;
  font-size: 1.2rem;
  font-weight: bold;
  width: 5.8rem;
  text-align: center;
}

.main_pige {
  display: flex;
  justify-content: space-between;
  margin-top: 6rem;
}
.main_pige_title {
  text-align: center;
  margin-right: 3rem;
}
.main_pige_title p:last-of-type {
  margin-top: 1rem;
}
.main_pige_title p:not(:last-of-type) {
  font-size: 2rem;
}
.main_pige_1,
.main_pige_2 {
  width: 14rem;
  text-align: center;
}
.main_pige_1 div:hover {
  box-shadow: 0 0 1.2rem grey;
}
.main_pige_2 div:hover {
  box-shadow: 0 0 1.2rem grey;
}
.main_pige_3 > a > div:hover {
  box-shadow: 0 0 1.4rem grey;
}
.main_pige_1 p,
.main_pige_2 p {
  color: black;
  padding: 0.6rem;
  box-sizing: border-box;
  font-size: 1.4rem;
}
.main_pige_1 img,
.main_pige_2 img {
  width: 100%;
}
.main_pige_1 > a > div,
.main_pige_2 > a > div {
  margin-bottom: 3rem;
}
.main_pige_3 > a > div {
  position: relative;
}
.main_pige_3_text {
  position: absolute;
  max-width: 14rem;
  color: white;
  bottom: 2.6rem;
  left: 2.6rem;
  text-shadow: 0 0 1rem grey;
}
.main_pige_3_text p:first-of-type {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.main_pige_3_text p:nth-of-type(2) {
  font-size: 0.8rem;
  margin-bottom: 1rem;
}
.main_pige_3_text p:last-of-type {
  font-size: 1.2rem;
}
.main_toggle {
  position: relative;
  height: 28rem;
  margin-top: 4rem;
}
.main_toggle:hover {
  box-shadow: 0 0 1.2rem grey;
}
.main_toggle_img img {
  width: 53rem;
  height: 28rem;
}
.main_toggle > div{
  position: absolute;
}
.main_toggle > div > a {
  display: flex;
}
.main_toggle_zhiwen {
  position: absolute;
  left: 66.5%;
  top: 20%;
  background-color: white;
  border-radius: 50%;
  width: 5rem;
  padding: 1rem;
  box-sizing: border-box;
}
.main_toggle_zhiwen img {
  width: 100%;
}
.main_toggle_text {
  padding: 4rem 3rem 0 3rem;
}
.main_toggle_text p:first-of-type {
  color: rgb(95, 94, 94);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.main_toggle_text p:nth-of-type(2) {
  color: black;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.main_toggle_text p:nth-of-type(3) {
  color: rgb(84, 84, 84);
  font-size: 1rem;
  margin-bottom: 1rem;
}
.main_toggle_text p:last-of-type {
  text-align: center;
  width: 6rem;
  color: white;
  font-size: 1.2rem;
  background-color: rgb(0, 0, 0);
  padding: 0.4rem 1rem;
  margin-bottom: 2rem;
}
.main_toggle_text span {
  display: inline-block;
  width: 2rem;
  margin-right: 4rem;
}
.main_toggle_text span img {
  width: 100%;
}

.main_new {
  display: flex;
  justify-content: space-between;
  margin-top: 6rem;
}
.main_new div p {
  font-size: 2rem;
  margin-bottom: 1.4rem;
}
.main_new div p:last-of-type {
  max-width: 22rem;
  font-size: 1rem;
  color: rgb(98, 97, 97);
  line-height: 2rem;
}
.main_new > ul {
  display: flex;
}
.main_new ul li {
  width: 12rem;
  height: 18rem;
  margin-left: 1rem;
}
.main_new ul li:hover {
  box-shadow: 0 0 1rem rgb(169, 169, 169);
}
.main_new ul li p {
  text-align: center;
  font-size: 1.4rem;
  margin: 0 1rem;
  color: black;
}
.main_new ul li img {
  width: 100%;
}

.main_chuanda > div {
  margin-top: 4rem;
  display: flex;
}
.main_chuanda > p {
  text-align: center;
  margin-bottom: 1.4rem;
}
.main_chuanda > p:first-of-type {
  font-size: 2rem;
  margin-top: 6rem;
}
.main_chuanda > p:last-of-type {
  font-size: 1.2rem;
}
.main_chuanda_left {
  position: relative;
  width: 37rem;
  flex: 1;
}
.main_chuanda_left img {
  width: 100%;
}
.main_chuanda_right {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: space-between;
}
.main_chuanda_right > div {
  width: 18rem;
  margin-left: 1rem;
  position: relative;
}
.main_chuanda_right > div img {
  width: 100%;
}
.main_chuanda_left div,
.main_chuanda_right > div > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.main_chuanda_left div a,
.main_chuanda_right > div > div a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
  color: white;
  padding: 0.5rem 2rem;
}

.main_sheji {
  display: flex;
  margin-top: 6rem;
  justify-content: space-between;
}
.main_sheji_left {
  margin-top: 4rem;
}
.main_sheji_left p:first-of-type {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}
.main_sheji_left p:last-of-type {
  line-height: 1.8rem;
}
.main_sheji_right {
  display: flex;
}
.main_sheji_right > div {
  flex: 1;
  width: 18rem;
  margin-left: 1rem;
  position: relative;
}
.main_sheji_right > div:hover {
  box-shadow: 0 0 1rem grey;
}
.main_sheji_right > div img {
  width: 100%;
}
.main_sheji_right > div div {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
}
.main_sheji_right > div div p:first-of-type {
  color: white;
  margin-bottom: 1rem;
}
.main_sheji_right > div div p:last-of-type {
  color: black;
  text-align: center;
  background-color: white;
  width: 5rem;
  padding: 0.4rem 1rem;
}

.main_tuijian p {
  text-align: center;
  color: black;
}
.main_tuijian > p:first-of-type {
  margin-top: 6rem;
  font-size: 2.2rem;
  margin-bottom: 1rem;
}
.main_tuijian > p:last-of-type {
  font-size: 0.8rem;
}
.main_tuijian ul {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
}
.main_tuijian ul li {
  width: 17rem;
}
.main_tuijian ul li:hover {
  box-shadow: 0 0 1rem grey;
}
.main_tuijian ul li img {
  width: 100%;
}
.main_tuijian ul li p {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.main_tuijian ul li p span,
del {
  font-size: 1.2rem;
}
del {
  color: gray;
  margin-left: 0.5rem;
}

</style>